<template>
  <div class='m-results_year'>
    <el-form :inline='true'>
      <el-form-item label='开始月份：'>
        <el-date-picker
          v-model="start_time"
          type="month"
          value-format="timestamp"
          placeholder="开始月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label='结束月份：'>
        <el-date-picker
          v-model="end_time"
          type="month"
          value-format="timestamp"
          placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='search'>搜索</el-button>
      </el-form-item>
    </el-form>
    <a-table :data='data' :cols='tableKeys'>
    </a-table>
    <div style='padding-top: 20px;font-size: 16px;' v-for='v in countList' :key='v.dept_name'>
      <span>{{ v.dept_name }}合计：</span>
      <strong>{{ v.count }}</strong>
    </div>
    <!-- <a-table :data='data' :cols='countTableKeys'>
    </a-table> -->
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination style='opacity: 0;' ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

const MONTH = {
  '1': 'january',
  '2': 'february',
  '3': 'march',
  '4': 'april',
  '5': 'may',
  '6': 'june',
  '7': 'july',
  '8': 'auguest',
  '9': 'september',
  '10': 'october',
  '11': 'november',
  '12': 'december'
}

const filterName = (value) => {
  return value || '合计'
}

const tmpMonthTableKeys = [
  { prop: 'january', label: '1月', minWidth: '100' },
  { prop: 'february', label: '2月', minWidth: '100' },
  { prop: 'march', label: '3月', minWidth: '100' },
  { prop: 'april', label: '4月', minWidth: '100' },
  { prop: 'may', label: '5月', minWidth: '100' },
  { prop: 'june', label: '6月', minWidth: '100' },
  { prop: 'july', label: '7月', minWidth: '100' },
  { prop: 'auguest', label: '8月', minWidth: '100' },
  { prop: 'september', label: '9月', minWidth: '100' },
  { prop: 'october', label: '10月', minWidth: '100' },
  { prop: 'november', label: '11月', minWidth: '100' },
  { prop: 'december', label: '12月', minWidth: '100' }
]

const defaultTableKeys = [
   { prop: 'dept_name', label: '部门', minWidth: '100' },
  { prop: 'staff_name', label: '名称', minWidth: '100', filter: filterName },
  { prop: 'count', label: '合计', minWidth: '100' }
]

export default {
  name: 'm-results_year',

  data() {
    return {
      tableKeys: [
        { prop: 'dept_name', label: '部门', minWidth: '100' },
        { prop: 'staff_name', label: '名称', minWidth: '100', filter: filterName },
        { prop: 'count', label: '合计', minWidth: '100' }
      ],
      start_time: new Date().getTime(),
      end_time: new Date().getTime(),
      data: [],
      countList: [],
      count: 0,
      ifRequesting: false
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    computingTable(data) {
      const _data = []
      data.forEach(v => {
        v.months.forEach(month => {
          _data.push({ key: month.key })
        })
      })
      const mapKey = _data.map(item => item.key)
      const numberKeys = mapKey.filter((numberKey, i) => { return mapKey.indexOf(numberKey) === i }).sort((now, prev) => now > prev)
      console.log(numberKeys)
      const defaultKey = []
      numberKeys.forEach(v => {
        defaultKey.push(tmpMonthTableKeys[v - 1])
      })
      // 处理 month
      this.tableKeys = [...defaultTableKeys, ...defaultKey]
    },

    computingCount() {
      // 将各个部门分类
      const tmp = []
      this.data.forEach(v => {
        const isHad = tmp.some(v2 => {
          if (v.dept_name === v2.dept_name) {
            v2.count += v.count
            return true
          }
          return false
        })
        if (!isHad) {
          tmp.push({
            dept_name: v.dept_name,
            count: v.count
          })
        }
      })
      this.countList = tmp
    },

    async fetchData(aPageNum, aPageSize) {
      const start_time = new Date(this.start_time)
      const end_time = new Date(this.end_time)
      const params = {
        aFirmId: this.aFirmId,
        aPageNum,
        aPageSize
      }
      if (this.start_time) params.aFromMonth = start_time.getMonth() + 1
      if (this.start_time) params.aFromYear = start_time.getFullYear()
      if (this.end_time) params.aToMonth = end_time.getMonth() + 1
      if (this.end_time) params.aToYear = end_time.getFullYear()
      return this.$api.linkGetStaffKpByPeriod(params)
    },

    getData(data) {
      let tmp = []
      // 合并重复的
      data.forEach(v => {
        const ifHad = tmp.some(item => {
          if (item.staff_name === v.staff_name || (!v.staff_name && (v.dept_name === item.dept_name))) {
            const key = parseInt(v.order_month.substring(5, 7))
            item.months.push({
              current: v.current,
              key,
              month: MONTH[key]
            })
            return true
          }
        })
        if (!ifHad) {
          const key = parseInt(v.order_month.substring(5, 7))
          tmp.push({
            ...v,
            months: [{
              current: v.current,
              key,
              month: MONTH[key]
            }]
          })
        }
      })
      this.computingTable(tmp)
      // 处理 month
      this.data = tmp.map(v => {
        const obj = { ...v, count: 0 }
        v.months.forEach(month => {
          obj.count += month.current
          obj.key = month.key
          obj[month.month] = month.current
        })
        obj.count = parseInt(obj.count, 10)
        return obj
      })
      this.computingCount()
    },

    search() {
      this.$refs.page.changePage()
    }
  }
}
</script>

<style lang='less'>

</style>